<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>goods</title>
    <link rel="stylesheet" href="../css/goods.css">
</head>

<body class="csgo">
<!-- 1.导航栏 header -->
<div class="header">
    <!-- logo -->
    <div class="logo">

    </div>

    <!-- 导航栏左边(首页+饰品市场) -->
    <div class="nav-left">
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="">饰品市场</a></li>
        </ul>
    </div>

    <!-- 导航栏右边(我的库存+我的出售+我的求购+个人中心) -->
    <div class="nav-right">
        <ul>
            <li><a href="">我的库存</a></li>
            <li><a href="">我的出售</a></li>
            <li><a href="">我的求购</a></li>
            <span><a href="" class="right-logo"></a></span>
            <li><a href="">个人中心</a></li>
        </ul>
    </div>

    <!-- 布局(小细节)--(饰品市场+饰品名字) -->
    <div class="layout">
        <span class="layout-market"><a href="">饰品市场</a></span>
        <span class="layout-icon">></span>
        <span class="layout-goods">USP 消音版 | 倒吊人(略有磨损)</span>
    </div>


</div>

<!-- 2.饰品详情（饰品介绍+当前在售） -->
<div class="main">
    <div class="detail-header">
        <!-- 饰品介绍图片 -->
        <div class="detail-img">

        </div>
        <!-- 饰品介绍文字 -->
        <div class="detail-text">
            <div class="text-left">
                <h1>USP 消音版 | 倒吊人 (略有磨损)</h1>
            </div>
            <div class="text-right">
                <span class="text-right-text">收 藏</span>
                <span class="text-right-logo">
                    <a href=""></a>
                </span>
            </div>

            <!-- 饰品属性 -->
            <p>
                <span>
                    <label>品质 |</label>隐秘
                </span>
                <span>
                    <label>类别 |</label>普通
                </span>
                <span>
                    <label>类型 |</label>手枪
                </span>
            </p>

            <!-- 横线修饰 -->
            <div class="line">

            </div>

            <!-- 细节（左边价格+右边出售求购） -->
            <div class="detail">
                <!-- 左边价格 -->
                <div class="detail-left">
                    <span>
                        <label>参考价格 |</label>
                        <strong class="m_strong">
                            <span class="s">￥</span>
                            <span class="money">539</span>
                            <span class="s">.37</span>
                            <small>($ 83.85)</small>
                        </strong>
                    </span>
                </div>

                 <!-- 右边出售求购 -->
                 <div class="detail-right">
                     <a href="" class="sale">我要出售</a>
                     <a href="" class="buy">我要求购</a>
                </div>
            </div>














        </div>

        <!-- 饰品类型 -->
        <div class="type">
            <a href="">
                <span>崭新出厂</span>
                <span>￥</span>
                <span>405</span>
            </a>

            <a href="">
                <span>略有破损</span>
                <span>￥</span>
                <span>203</span>
            </a>

            <a href="">
                <span>久经沙场</span>
                <span>￥</span>
                <span>130</span>
            </a>

            <a href="">
                <span>破损不堪</span>
                <span>￥</span>
                <span>101.88</span>
            </a>
        </div>

        <!-- 市场头部 -->
        <div class="market-header">
            <!-- 目录标签 -->
            <div class="cont-tab">
                <!-- 左侧标签 -->
                <div class="tab-left">
                    <ul>
                        <li class="selling on">
                            <a href="">当前在售(295)</a>
                        </li>

                        <li class="selling on">
                            <a href="">当前求购(23)</a>
                        </li>

                        <li class="selling on">
                            <a href="">成交记录</a>
                        </li>

                        <li class="selling on">
                            <a href="">价格趋势</a>
                        </li>
                    </ul>
                </div>
                 <!-- 右侧标签 -->
                 <div class="tab-right">
                     <div class="tab-right-btn">
                         <a href="" >批量购买</a>
                     </div>
                </div>
            </div>
        </div>
        

    </div>
</div>


</body>
</html>